<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引出生命周期</title>
</head>
<body>
  <div id="test"></div>

  <!-- 引入库：先引入核心库，再引入操作DOM的扩展库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">    //必须写babel，因为默认js
  //生命周期回调函数 <==> 生命周期钩子函数 <==> 生命周期函数 <==> 生命周期钩子
    class Life extends React.Component{

      state = {opacity:1}

      death =()=>{
        // clearInterval(this.timer)
        //卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      //挂载完毕，定时器
      componentDidMount(){
        this.timer = setInterval(()=>{
          console.log('@')
          //获取原状态
          let {opacity} = this.state
          //减小
          opacity -= 0.1
          if(opacity <= 0) opacity = 1 
          this.setState({opacity})
        }, 200)
      }

      //组件将要被卸载
      componentWillUnmount(){
        clearInterval(this.timer)
      }

      //初始化渲染、状态更新之后
      render(){
        return(
          <div>
            {/*style:{color:red}是内联样式，因为里面是js，而react是jsx，所以还需要{}来包裹*/}
            <h2 style={{opacity:this.state.opacity}}>学不会，怎么办</h2>
            <button onClick={this.death}>不活了</button>
          </div>
        )
      }
    }

    ReactDOM.render(<Life/>, document.getElementById('test'))
  </script>
</body>
</html>